<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>马帮文化藏宝图冒险记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-paper min-h-screen text-ink font-story overflow-x-hidden">
    <div class="flex items-center p-4">
        <a href="主体 (2).html"></a>
        <i class="fa fa-arrow-left text-xl mr-2 cursor-pointer" onclick="window.history.back()"></i>
        <h1 class="text-lg font-bold">马帮文化探险</h1>
</body>
</div>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>马帮文化藏宝图冒险记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
       
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B4513',      // 棕褐色 - 马帮主题色
                        secondary: '#D2B48C',    // 棕黄色 - 辅助色
                        accent: '#CD853F',       // 秘鲁色 - 强调色
                        ink: '#2C1E1E',          // 墨色 - 文字主色
                        paper: '#F5F0E6',        // 纸张色 - 背景色
                    },
                    fontFamily: {
                        adventure: ['"Ma Shan Zheng"', 'cursive'],
                        story: ['"ZCOOL XiaoWei"', 'serif'],
                    },
                    boxShadow: {
                        'game': '0 4px 6px -1px rgba(139, 69, 19, 0.3), 0 2px 4px -1px rgba(139, 69, 19, 0.2)',
                        'game-hover': '0 10px 15px -3px rgba(139, 69, 19, 0.4), 0 4px 6px -2px rgba(139, 69, 19, 0.2)',
                    }
                },
            }
        }
    </script>
    
    <!-- 引入中文字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .map-texture {
                background-image: url('https://picsum.photos/id/1015/1000/800');
                background-size: cover;
                background-position: center;
                background-blend-mode: overlay;
            }
            .paper-texture {
                background-image: url('https://picsum.photos/id/106/1000/1000');
                background-size: cover;
                background-position: center;
                background-blend-mode: overlay;
            }
            .scroll-decoration {
                background-image: url('https://picsum.photos/id/175/200/800');
                background-size: contain;
                background-repeat: repeat-y;
            }
            .shake {
                animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .pulse {
                animation: pulse 2s infinite;
            }
        }
        
        @keyframes shake {
            10%, 90% { transform: translateX(-1px); }
            20%, 80% { transform: translateX(2px); }
            30%, 50%, 70% { transform: translateX(-3px); }
            40%, 60% { transform: translateX(3px); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(205, 133, 63, 0.4); }
            70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(205, 133, 63, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(205, 133, 63, 0); }
        }

        /* 地图标记点样式优化 */
        .treasure-spot {
            cursor: pointer !important;
            transition: all 0.3s ease !important;
            z-index: 30 !important; /* 确保在所有元素之上 */
        }
        
        .treasure-spot:hover {
            transform: scale(1.3) !important;
        }

        /* 解决地图可能的点击遮挡问题 */
        #map-container svg {
            pointer-events: none; /* 确保SVG路径不遮挡点击 */
        }
        
        .location-label {
            pointer-events: none; /* 确保文字标签不遮挡点击 */
        }
    </style>
</head>
<body class="bg-paper min-h-screen text-ink font-story overflow-x-hidden">
    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white py-3 px-4 shadow-md relative z-10">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center">
                <i class="fa fa-map-signs text-2xl mr-2"></i>
                <h1 class="font-adventure text-xl md:text-2xl">马帮文化藏宝图冒险记</h1>
            </div>
            <div class="flex items-center space-x-3">
                <div class="hidden md:flex items-center bg-secondary bg-opacity-20 px-3 py-1 rounded-full">
                    <i class="fa fa-star text-yellow-300 mr-1"></i>
                    <span id="score-display" class="text-sm">得分: 0</span>
                </div>
                <button id="help-button" class="p-2 hover:bg-white hover:bg-opacity-20 rounded-full transition-all">
                    <i class="fa fa-question-circle"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主游戏区域 -->
    <main class="container mx-auto px-4 py-6 relative">
        <!-- 开始界面 -->
        <section id="start-screen" class="max-w-3xl mx-auto bg-secondary bg-opacity-30 rounded-2xl p-6 md:p-10 shadow-game">
            <div class="text-center mb-8">
                <h2 class="font-adventure text-3xl md:text-4xl text-primary mb-4">马帮文化探险</h2>
                <p class="font-story text-sm md:text-base max-w-lg mx-auto">
                    穿越茶马古道，探寻马帮文化的秘密宝藏。选择你的角色，开始这段惊险刺激的冒险吧！
                </p>
            </div>
            
            <div class="mb-8">
                <h3 class="font-adventure text-xl text-center mb-4">选择你的角色</h3>
                <div class="grid grid-cols-2 gap-4 max-w-md mx-auto">
                    <div class="role-option bg-secondary bg-opacity-30 p-3 rounded-lg text-center cursor-pointer transition-all hover:bg-opacity-50 border-2 border-transparent hover:border-accent active:scale-95" data-role="guide">
                        <i class="fa fa-compass text-2xl mb-2 text-primary"></i>
                        <p class="font-adventure text-sm">向导</p>
                        <p class="text-xs mt-1">擅长寻找路径和方向</p>
                    </div>
                    <div class="role-option bg-secondary bg-opacity-30 p-3 rounded-lg text-center cursor-pointer transition-all hover:bg-opacity-50 border-2 border-transparent hover:border-accent active:scale-95" data-role="historian">
                        <i class="fa fa-book text-2xl mb-2 text-primary"></i>
                        <p class="font-adventure text-sm">历史学者</p>
                        <p class="text-xs mt-1">精通马帮文化和历史</p>
                    </div>
                    <div class="role-option bg-secondary bg-opacity-30 p-3 rounded-lg text-center cursor-pointer transition-all hover:bg-opacity-50 border-2 border-transparent hover:border-accent active:scale-95" data-role="trader">
                        <i class="fa fa-balance-scale text-2xl mb-2 text-primary"></i>
                        <p class="font-adventure text-sm">马帮商人</p>
                        <p class="text-xs mt-1">了解货物和交易秘密</p>
                    </div>
                    <div class="role-option bg-secondary bg-opacity-30 p-3 rounded-lg text-center cursor-pointer transition-all hover:bg-opacity-50 border-2 border-transparent hover:border-accent active:scale-95" data-role="hunter">
                        <i class="fa fa-bullseye text-2xl mb-2 text-primary"></i>
                        <p class="font-adventure text-sm">猎人</p>
                        <p class="text-xs mt-1">擅长发现隐藏的物品</p>
                    </div>
                </div>
            </div>
            
            <div class="text-center">
                <button id="start-button" class="btn-interactive bg-primary hover:bg-primary/90 text-white font-adventure text-xl py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-game">
                    开始冒险 <i class="fa fa-arrow-right ml-2"></i>
                </button>
            </div>
        </section>

        <!-- 地图界面 -->
        <section id="map-screen" class="hidden max-w-4xl mx-auto">
            <div class="flex justify-between items-center mb-4">
                <button id="back-to-start" class="btn-interactive bg-secondary hover:bg-secondary/80 text-ink py-2 px-4 rounded-lg flex items-center">
                    <i class="fa fa-arrow-left mr-2"></i> 返回
                </button>
                <div class="flex items-center bg-secondary bg-opacity-30 px-3 py-1 rounded-full">
                    <i class="fa fa-star text-yellow-600 mr-1"></i>
                    <span id="map-score-display" class="text-sm">得分: 0</span>
                </div>
            </div>
            
            <div id="map-container" class="map-texture bg-paper rounded-xl p-4 md:p-8 aspect-[4/3] relative border-8 border-secondary shadow-xl overflow-hidden z-10">
                <h2 class="font-adventure text-2xl text-primary absolute top-4 left-4 bg-paper bg-opacity-70 px-3 py-1 rounded-lg shadow-md z-20">茶马古道地图</h2>
                
                <!-- 地图路线 -->
                <svg class="absolute inset-0 w-full h-full z-10" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10%,20% C30%,10% 40%,30% 60%,25% S80%,40% 90%,60%" 
                          stroke="#8B4513" stroke-width="3" fill="none" stroke-dasharray="5,5"/>
                    <path d="M90%,60% C80%,70% 60%,80% 40%,75% S20%,60% 10%,80%" 
                          stroke="#8B4513" stroke-width="3" fill="none" stroke-dasharray="5,5"/>
                </svg>
                
                <!-- 地图标记点 - 优化点击区域和交互 -->
                <div class="treasure-spot absolute top-[20%] left-[10%] w-6 h-6 bg-accent rounded-full cursor-pointer flex items-center justify-center pulse" data-location="ancient-inn">
                    <div class="w-3 h-3 bg-yellow-300 rounded-full"></div>
                </div>
                <div class="location-label absolute top-[15%] left-[30%] text-xs bg-paper bg-opacity-80 px-2 py-1 rounded shadow-md z-20">
                    古驿站
                </div>
                
                <div class="treasure-spot absolute top-[25%] left-[60%] w-6 h-6 bg-accent rounded-full cursor-pointer flex items-center justify-center pulse" data-location="mountain-temple">
                    <div class="w-3 h-3 bg-yellow-300 rounded-full"></div>
                </div>
                <div class="location-label absolute top-[20%] left-[65%] text-xs bg-paper bg-opacity-80 px-2 py-1 rounded shadow-md z-20">
                    山神庙
                </div>
                
                <div class="treasure-spot absolute top-[60%] left-[90%] w-6 h-6 bg-accent rounded-full cursor-pointer flex items-center justify-center pulse" data-location="ancient-bridge">
                    <div class="w-3 h-3 bg-yellow-300 rounded-full"></div>
                </div>
                <div class="location-label absolute top-[55%] left-[85%] text-xs bg-paper bg-opacity-80 px-2 py-1 rounded shadow-md z-20">
                    古桥
                </div>
                
                <div class="treasure-spot absolute top-[75%] left-[40%] w-6 h-6 bg-accent rounded-full cursor-pointer flex items-center justify-center pulse" data-location="cave">
                    <div class="w-3 h-3 bg-yellow-300 rounded-full"></div>
                </div>
                <div class="location-label absolute top-[70%] left-[45%] text-xs bg-paper bg-opacity-80 px-2 py-1 rounded shadow-md z-20">
                    山洞
                </div>
                
                <div class="treasure-spot absolute top-[80%] left-[10%] w-6 h-6 bg-accent rounded-full cursor-pointer flex items-center justify-center pulse" data-location="old-village">
                    <div class="w-3 h-3 bg-yellow-300 rounded-full"></div>
                </div>
                <div class="location-label absolute top-[75%] left-[15%] text-xs bg-paper bg-opacity-80 px-2 py-1 rounded shadow-md z-20">
                    废弃村落
                </div>
            </div>
            
            <div class="mt-6 bg-secondary bg-opacity-20 rounded-xl p-4">
                <h3 class="font-adventure text-lg text-primary mb-2">探险日志</h3>
                <div id="adventure-log" class="text-sm h-20 overflow-y-auto bg-paper bg-opacity-50 p-3 rounded-lg">
                    <p>开始你的马帮探险吧！点击地图上的标记点进行探索。</p>
                </div>
            </div>
        </section>

        <!-- 探索界面 -->
        <section id="explore-screen" class="hidden max-w-3xl mx-auto">
            <div class="flex justify-between items-center mb-4">
                <button id="back-to-map" class="btn-interactive bg-secondary hover:bg-secondary/80 text-ink py-2 px-4 rounded-lg flex items-center">
                    <i class="fa fa-arrow-left mr-2"></i> 地图
                </button>
                <div class="flex items-center space-x-2">
                    <button id="hint-button" class="btn-interactive bg-accent hover:bg-accent/90 text-white py-2 px-3 rounded-lg text-sm flex items-center">
                        <i class="fa fa-question-circle mr-1"></i> 提示 <span id="hints-count" class="ml-1 text-xs opacity-70">(3/3)</span>
                    </button>
                    <div class="flex items-center bg-secondary bg-opacity-30 px-3 py-1 rounded-full">
                        <i class="fa fa-star text-yellow-600 mr-1"></i>
                        <span id="explore-score-display" class="text-sm">得分: 0</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-game overflow-hidden">
                <div id="location-image" class="h-48 md:h-64 bg-cover bg-center" style="background-image: url('https://picsum.photos/id/1036/800/400')"></div>
                
                <div class="p-5">
                    <h2 id="location-name" class="font-adventure text-2xl text-primary mb-2">探索地点</h2>
                    <p id="location-description" class="text-sm mb-4">这里是地点描述，将展示当前探索地点的背景信息。</p>
                    
                    <div class="mb-5">
                        <h3 class="font-adventure text-lg text-primary mb-3">探索区域</h3>
                        <div id="search-area" class="grid grid-cols-2 md:grid-cols-3 gap-3">
                            <!-- 探索物品将通过JS动态生成 -->
                        </div>
                    </div>
                    
                    <div id="mini-game-section" class="mb-4 hidden">
                        <h3 class="font-adventure text-lg text-primary mb-3">马帮小游戏</h3>
                        <div id="mini-game-content" class="bg-secondary bg-opacity-10 p-3 rounded-lg min-h-[120px]">
                            <!-- 小游戏内容将通过JS动态生成 -->
                        </div>
                        <button id="start-mini-game" class="btn-interactive mt-3 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg text-sm">
                            开始挑战 <i class="fa fa-gamepad ml-1"></i>
                        </button>
                    </div>
                    
                    <div id="next-location-section" class="hidden">
                        <button id="next-location-button" class="btn-interactive w-full bg-accent hover:bg-accent/90 text-white py-3 rounded-xl transition-all">
                            前往下一个地点 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 宝藏发现界面 -->
        <section id="treasure-screen" class="hidden max-w-2xl mx-auto text-center">
            <div class="bg-gradient-to-b from-secondary/30 to-paper rounded-2xl p-6 shadow-game">
                <div class="mb-4">
                    <i class="fa fa-diamond text-5xl text-yellow-500 animate-pulse"></i>
                    <h2 class="font-adventure text-3xl text-primary mt-2">发现宝藏！</h2>
                </div>
                
                <div id="treasure-info" class="mb-6">
                    <h3 class="font-adventure text-xl text-primary mb-2">宝藏名称</h3>
                    <p class="text-sm max-w-md mx-auto">这是一件珍贵的马帮文物，具有重要的历史价值。</p>
                </div>
                
                <div class="flex space-x-3 mb-6">
                    <button id="treasure-detail-button" class="btn-interactive flex-1 bg-secondary hover:bg-secondary/80 text-ink py-2 rounded-xl transition-all duration-300">
                        查看详情
                    </button>
                    <button id="continue-button" class="btn-interactive flex-1 bg-accent hover:bg-accent/90 text-white py-2 rounded-xl transition-all duration-300">
                        继续探险
                    </button>
                </div>
                
                <div class="bg-white bg-opacity-70 rounded-lg p-3 inline-block">
                    <p class="text-sm mb-1">获得奖励</p>
                    <p class="font-adventure text-lg text-primary"><i class="fa fa-star text-yellow-500 mr-1"></i> 50 分</p>
                </div>
            </div>
        </section>

        <!-- 宝藏详情界面 -->
        <section id="treasure-detail-screen" class="hidden max-w-2xl mx-auto">
            <div class="flex justify-between items-center mb-4">
                <button id="back-to-treasure" class="btn-interactive bg-secondary hover:bg-secondary/80 text-ink py-2 px-4 rounded-lg flex items-center">
                    <i class="fa fa-arrow-left mr-2"></i> 返回
                </button>
            </div>
            
            <div class="bg-white rounded-xl shadow-game overflow-hidden">
                <div id="treasure-detail-image" class="h-48 md:h-64 bg-cover bg-center" style="background-image: url('https://picsum.photos/id/175/800/400')"></div>
                
                <div class="p-5">
                    <h2 id="treasure-detail-name" class="font-adventure text-2xl text-primary mb-2">宝藏详情</h2>
                    <div class="flex items-center text-sm mb-4">
                        <span class="bg-secondary bg-opacity-30 px-2 py-1 rounded mr-2">
                            <i class="fa fa-map-marker mr-1 text-primary"></i> 发现地点
                        </span>
                        <span id="treasure-location" class="italic">未知</span>
                    </div>
                    
                    <div class="mb-4">
                        <h3 class="font-adventure text-lg text-primary mb-2">历史背景</h3>
                        <p id="treasure-history" class="text-sm leading-relaxed">
                            这里将展示宝藏的详细历史背景和文化价值，介绍这件文物在马帮文化中的重要性。
                        </p>
                    </div>
                    
                    <div class="mb-4">
                        <h3 class="font-adventure text-lg text-primary mb-2">文物特征</h3>
                        <ul id="treasure-features" class="text-sm list-disc pl-5 space-y-1">
                            <li>特征一</li>
                            <li>特征二</li>
                            <li>特征三</li>
                        </ul>
                    </div>
                    
                    <button id="treasure-continue-button" class="btn-interactive w-full bg-accent hover:bg-accent/90 text-white py-3 rounded-xl transition-all">
                        继续探险 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 游戏结束界面 -->
        <section id="end-screen" class="hidden max-w-3xl mx-auto text-center">
            <div class="bg-gradient-to-b from-primary/10 to-paper rounded-2xl p-6 md:p-10 shadow-game">
                <h2 class="font-adventure text-3xl md:text-4xl text-primary mb-4">探险完成！</h2>
                
                <div class="mb-6 p-4 bg-white bg-opacity-70 rounded-xl inline-block">
                    <p class="text-sm mb-1">你的总得分</p>
                    <p id="final-score" class="font-adventure text-4xl text-primary"><i class="fa fa-star text-yellow-500 mr-2"></i> 0</p>
                </div>
                
                <div class="mb-8">
                    <h3 class="font-adventure text-xl text-primary mb-3">你的发现</h3>
                    <div id="collected-treasures" class="grid grid-cols-2 md:grid-cols-3 gap-3 max-w-md mx-auto">
                        <!-- 收集的宝藏将通过JS动态生成 -->
                    </div>
                </div>
                
                <div class="flex flex-col sm:flex-row justify-center gap-3">
                    <button id="restart-game" class="btn-interactive bg-primary hover:bg-primary/90 text-white font-adventure text-xl py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-game">
                        <i class="fa fa-refresh mr-2"></i> 重新开始
                    </button>
                    <button id="share-game" class="btn-interactive bg-accent hover:bg-accent/90 text-white font-adventure text-xl py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-game">
                        <i class="fa fa-share-alt mr-2"></i> 分享成果
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- 帮助弹窗 -->
    <div id="help-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-paper rounded-xl p-6 max-w-md w-full max-h-[80vh] overflow-y-auto">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-adventure text-2xl text-primary">游戏帮助</h3>
                <button id="close-help" class="text-ink hover:text-primary">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <div class="space-y-4 text-sm">
                <div>
                    <h4 class="font-adventure text-primary mb-1">游戏目标</h4>
                    <p>探索茶马古道上的各个地点，寻找隐藏的马帮宝藏，了解马帮文化的历史和价值。</p>
                </div>
                
                <div>
                    <h4 class="font-adventure text-primary mb-1">如何操作</h4>
                    <ul class="list-disc pl-5 space-y-1">
                        <li>选择一个角色开始你的探险</li>
                        <li>点击地图上闪烁的标记点进行探索</li>
                        <li>在每个地点寻找隐藏的宝藏</li>
                        <li>完成小游戏可以获得额外线索</li>
                        <li>使用提示功能可以获得寻找宝藏的线索</li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-adventure text-primary mb-1">得分规则</h4>
                    <ul class="list-disc pl-5 space-y-1">
                        <li>发现宝藏：+50分</li>
                        <li>完成小游戏：+20分</li>
                        <li>使用提示：-10分</li>
                        <li>快速找到宝藏：额外+10分</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-primary text-white text-center py-4 mt-10">
        <div class="container mx-auto px-4 text-sm">
            <p>© 2023 马帮文化藏宝图冒险记 | 探索茶马古道的秘密</p>
            <p class="mt-1 opacity-70">了解更多马帮文化，传承历史记忆</p>
        </div>
    </footer>

    <script>
        // 游戏数据
        const gameData = {
            player: {
                role: null,
                score: 0,
                collectedTreasures: []
            },
            hintsRemaining: 3,
            currentLocation: null,
            locations: [
                {
                    id: 'ancient-inn',
                    name: '古驿站',
                    description: '这是茶马古道上的一处古老驿站，曾经是马帮歇脚补给的重要站点。驿站内保存着许多马帮使用过的物品和工具。',
                   image:'image/古驿站.jpg',
                    items: [
                        { name: '马灯', isTreasure: false, description: '马帮夜间赶路时使用的照明工具，防风防水' },
                        { name: '马鞍', isTreasure: false, description: '马帮用来驮运货物的特制马鞍，能分散重量' },
                        { name: '旧账本', isTreasure: true, description: '记录着马帮贸易往来的账本，详细记载了当时的商品价格和交易情况', 
                          history: '这本账本距今已有近200年历史，详细记录了清道光年间马帮从云南到西藏的贸易路线和商品交易情况。账本中不仅记录了茶叶、丝绸等商品的交易价格，还记录了沿途的风土人情和马帮的日常生活，是研究茶马古道贸易史的重要实物资料。',
                          features: ['用坚韧的皮纸制作，防水防潮', '毛笔手写，字迹清晰', '记录了37次贸易往返的详细数据', '附有简易的路线图'] },
                        { name: '水壶', isTreasure: false, description: '马帮成员随身携带的水壶，通常用竹筒或葫芦制成' },
                        { name: '铃铛', isTreasure: false, description: '挂在马脖子上的铃铛，既能驱赶野兽，又能在山间传递信号' },
                        { name: '茶叶罐', isTreasure: false, description: '存放茶叶的容器，马帮贸易的主要商品之一' }
                    ],
                    miniGame: {
                        type: 'memory',
                        description: '马帮商人需要记住各种商品的位置，考验你的记忆力',
                        reward: '发现了一张隐藏的路线图，指向了下一个宝藏点！'
                    }
                },
                {
                    id: 'mountain-temple',
                    name: '山神庙',
                    description: '位于云南驿村的古老庙宇，马帮每次经过都会前来祈福，祈求路途平安。庙内保存着许多马帮捐赠的物品。',
                    image: 'image/山神庙.jpg',
                    items: [
                        { name: '祈愿牌', isTreasure: false, description: '马帮成员悬挂的祈愿牌，上面写着平安的愿望' },
                        { name: '香炉', isTreasure: false, description: '用于焚香祈福的器具，表面刻有精美的花纹' },
                        { name: '土地像', isTreasure: true, description: '马帮从中原带回的铜佛像，被供奉在山神庙中',
                          history: '这尊土地像制作于19世纪初期，由当时的马帮从中原经茶马古道带回。土地像高约30厘米，采用失蜡法铸造，工艺精湛，体现了中原与中国西南地区的文化交流。马帮将其供奉在山神庙中，希望能保佑他们旅途平安。',
                          features: ['高约30厘米，重约5公斤', '表面鎏金，虽有磨损但仍能看出当年的精美', '佛像表情慈祥，姿态端庄', '底座刻有铭文'] },
                        { name: '经书', isTreasure: false, description: '寺庙中的古老经书，记录着佛教经文' },
                        { name: '钟', isTreasure: false, description: '寺庙中用于念经伴奏的法器' },
                        { name: '烛台', isTreasure: false, description: '用于点燃蜡烛的器具，多为铜制' }
                    ],
                    miniGame: {
                        type: 'puzzle',
                        description: '将打乱的神像碎片重新拼合，考验你的观察力',
                        reward: '获得了一本马帮日记，里面记载了宝藏的线索！'
                    }
                },
                {
                    id: 'ancient-bridge',
                    name: '古桥',
                    description: '横跨湍急河流的古老石桥，是茶马古道上的重要通道。数百年来，无数马帮从这里经过，桥面留下了深深的马蹄印。',
                    image: 'image/古桥.jpg',
                    items: [
                        { name: '马蹄铁', isTreasure: false, description: '从马掌上脱落的马蹄铁，散落在桥边' },
                        { name: '石雕像', isTreasure: false, description: '桥头的石雕像，用于镇桥辟邪' },
                        { name: '铜锁', isTreasure: true, description: '用来锁住桥门的大铜锁，上面刻有马帮记号',
                          history: '这把铜锁制作于清代中期，是古桥夜间关闭时使用的锁具。铜锁上刻有三个不同的马帮记号，表明这是当时几个主要马帮共同出资铸造的。锁身厚重，工艺精湛，历经百年风雨仍能正常使用，体现了当时高超的金属加工技术。',
                          features: ['长约20厘米，重约3公斤', '表面刻有三个不同的马帮记号', '钥匙孔设计独特，防止撬锁', '铜质优良，防锈性能好'] },
                        { name: '石碑', isTreasure: false, description: '记录建桥历史的石碑，字迹已有些模糊' },
                        { name: '桥墩', isTreasure: false, description: '支撑桥面的桥墩，历经数百年洪水冲刷仍坚固如初' },
                        { name: '铁链', isTreasure: false, description: '加固桥面的铁链，连接两岸的岩石' }
                    ],
                    miniGame: {
                        type: 'balance',
                        description: '帮助马帮将货物平稳地运过桥，考验你的平衡感',
                        reward: '找到了一个马帮成员掉落的钱袋，里面有一些银币！'
                    }
                },
                {
                    id: 'cave',
                    name: '山洞',
                    description: '隐藏在山谷中的天然洞穴，曾是马帮躲避风雨和强盗的临时避难所。洞内留有许多马帮生活的痕迹。',
                    image: 'image/山洞.jpg',
                    items: [
                        { name: '铁锅', isTreasure: false, description: '马帮在炖煮食物时散发出的盐巴和油脂的香气' },
                        { name: '篝火堆', isTreasure: false, description: '马帮在洞内生火取暖的地方，留有厚厚的灰烬' },
                        { name: '陶罐', isTreasure: true, description: '马帮用来储存食物和水的陶罐，上面有独特的纹饰',
                          history: '这个陶罐产自云南大理，是19世纪中期的制品。陶罐表面绘有茶马古道的简化路线图，是非常罕见的带有路线图的实物资料。马帮通常用这类陶罐来储存水、盐和其他不易变质的食物，其独特的密封设计能有效保持食物新鲜。',
                          features: ['高约40厘米，口径约15厘米', '表面绘有茶马古道路线图', '采用当地特有的红土烧制', '带有独特的密封设计'] },
                        { name: '草垫', isTreasure: false, description: '马帮成员休息用的草垫，由干草编织而成' },
                        { name: '岩壁刻画', isTreasure: false, description: '马帮成员在岩壁上留下的简单刻画，记录着经过的日期' },
                        { name: '弓箭', isTreasure: false, description: '马帮用于防身和打猎的武器' }
                    ],
                    miniGame: {
                        type: 'search',
                        description: '在昏暗的山洞中寻找隐藏的物品，考验你的洞察力',
                        reward: '发现了一张马帮藏宝图的碎片！'
                    }
                },
                {
                    id: 'old-village',
                    name: '废弃村落',
                    description: '曾经繁荣的村落，随着茶马古道的衰落而逐渐废弃。村内还保留着许多马帮时期的建筑和物品。',
                    image: 'image/废弃村落.jpg',
                    items: [
                        { name: '炊具', isTreasure: false, description: '村民和马帮当年生火做饭的证明' },
                        { name: '旧农具', isTreasure: false, description: '村民使用的各种农具，有些也被马帮借用' },
                        { name: '马帮旗帜', isTreasure: true, description: '悬挂在村口的马帮旗帜，上面绣有马帮的标志',
                          history: '这面旗帜属于清末民初活跃在茶马古道上的"永昌马帮"，是当时规模最大的马帮之一。旗帜采用坚韧的麻布制作，上面绣有马帮的标志——一匹驮着茶叶的马。马帮旗帜不仅是身份的象征，还能在远距离识别同伴，在复杂的山区环境中非常实用。',
                          features: ['长约120厘米，宽约80厘米', '采用耐用的麻布制作', '红色底色，黄色刺绣', '边缘有加固设计，不易磨损'] },
                        { name: '水井', isTreasure: false, description: '村落的水源，也是马帮补充饮水的地方' },
                        { name: '土掌房', isTreasure: false, description: '当地特有的传统建筑，马帮曾在此歇脚' },
                        { name: '石碾', isTreasure: false, description: '用于脱粒或加工茶叶的大型石器' }
                    ],
                    miniGame: {
                        type: 'trading',
                        description: '模拟马帮贸易，用合适的价格交换商品，考验你的商业头脑',
                        reward: '获得了一位老村民的指点，得知了最后一个宝藏的位置！'
                    }
                }
            ]
        };

        // DOM元素
        const startScreen = document.getElementById('start-screen');
        const mapScreen = document.getElementById('map-screen');
        const exploreScreen = document.getElementById('explore-screen');
        const treasureScreen = document.getElementById('treasure-screen');
        const treasureDetailScreen = document.getElementById('treasure-detail-screen');
        const endScreen = document.getElementById('end-screen');
        const helpModal = document.getElementById('help-modal');

        const startButton = document.getElementById('start-button');
        const backToStartButton = document.getElementById('back-to-start');
        const backToMapButton = document.getElementById('back-to-map');
        const hintButton = document.getElementById('hint-button');
        const hintsCountDisplay = document.getElementById('hints-count');
        const startMiniGameButton = document.getElementById('start-mini-game');
        const treasureDetailButton = document.getElementById('treasure-detail-button');
        const backToTreasureButton = document.getElementById('back-to-treasure');
        const continueButton = document.getElementById('continue-button');
        const treasureContinueButton = document.getElementById('treasure-continue-button');
        const nextLocationButton = document.getElementById('next-location-button');
        const restartGameButton = document.getElementById('restart-game');
        const shareGameButton = document.getElementById('share-game');
        const helpButton = document.getElementById('help-button');
        const closeHelpButton = document.getElementById('close-help');

        const scoreDisplay = document.getElementById('score-display');
        const mapScoreDisplay = document.getElementById('map-score-display');
        const exploreScoreDisplay = document.getElementById('explore-score-display');
        const finalScoreDisplay = document.getElementById('final-score');
        const adventureLog = document.getElementById('adventure-log');
        const locationNameElement = document.getElementById('location-name');
        const locationDescriptionElement = document.getElementById('location-description');
        const locationImageElement = document.getElementById('location-image');
        const searchAreaElement = document.getElementById('search-area');
        const miniGameSection = document.getElementById('mini-game-section');
        const miniGameContent = document.getElementById('mini-game-content');
        const nextLocationSection = document.getElementById('next-location-section');
        const treasureInfoElement = document.getElementById('treasure-info');
        const treasureDetailNameElement = document.getElementById('treasure-detail-name');
        const treasureLocationElement = document.getElementById('treasure-location');
        const treasureHistoryElement = document.getElementById('treasure-history');
        const treasureFeaturesElement = document.getElementById('treasure-features');
        const treasureDetailImageElement = document.getElementById('treasure-detail-image');
        const collectedTreasuresElement = document.getElementById('collected-treasures');

        // 初始化游戏
        function initGame() {
            // 角色选择
            document.querySelectorAll('.role-option').forEach(option => {
                option.addEventListener('click', () => {
                    // 移除其他角色的选中状态
                    document.querySelectorAll('.role-option').forEach(opt => {
                        opt.classList.remove('bg-opacity-70', 'border-accent');
                        opt.classList.add('bg-opacity-30', 'border-transparent');
                    });
                    
                    // 设置当前角色选中状态
                    option.classList.remove('bg-opacity-30', 'border-transparent');
                    option.classList.add('bg-opacity-70', 'border-accent');
                    
                    // 保存选择的角色
                    gameData.player.role = option.dataset.role;
                });
            });

            // 事件监听
            startButton.addEventListener('click', startGame);
            backToStartButton.addEventListener('click', () => showScreen('start-screen'));
            backToMapButton.addEventListener('click', () => showScreen('map-screen'));
            hintButton.addEventListener('click', useHint);
            startMiniGameButton.addEventListener('click', startMiniGame);
            treasureDetailButton.addEventListener('click', showTreasureDetail);
            backToTreasureButton.addEventListener('click', () => showScreen('treasure-screen'));
            continueButton.addEventListener('click', continueAdventure);
            treasureContinueButton.addEventListener('click', continueAdventure);
            nextLocationButton.addEventListener('click', goToNextLocation);
            restartGameButton.addEventListener('click', restartGame);
            shareGameButton.addEventListener('click', shareResults);
            helpButton.addEventListener('click', () => helpModal.classList.remove('hidden'));
            closeHelpButton.addEventListener('click', () => helpModal.classList.add('hidden'));

            // 地图地点点击 - 增强版处理确保点击有效
            setupMapClickHandlers();

            // 探索物品点击事件委托
            document.getElementById('search-area').addEventListener('click', (e) => {
                const itemElement = e.target.closest('.inventory-item');
                if (!itemElement || itemElement.classList.contains('opacity-50')) return;
                
                const isTreasure = itemElement.dataset.isTreasure === 'true';
                const itemName = itemElement.querySelector('p').textContent;
                const itemDesc = itemElement.getAttribute('title');
                
                handleSearchItemClick(itemElement, { name: itemName, isTreasure: isTreasure, description: itemDesc });
            });

            // 初始化显示开始界面
            showScreen('start-screen');
        }

        // 专门处理地图点击的函数，确保标记点可点击
        function setupMapClickHandlers() {
            // 方法1: 直接给每个标记点绑定点击事件
            const treasureSpots = document.querySelectorAll('.treasure-spot');
            treasureSpots.forEach(spot => {
                // 先移除可能存在的旧事件，避免重复绑定
                spot.removeEventListener('click', handleSpotClick);
                // 添加新的点击事件
                spot.addEventListener('click', handleSpotClick);
                
                // 添加触摸设备支持
                spot.removeEventListener('touchstart', handleSpotTouch);
                spot.addEventListener('touchstart', handleSpotTouch, { passive: true });
            });

            // 方法2: 同时使用事件委托作为备份
            const mapContainer = document.getElementById('map-container');
            mapContainer.removeEventListener('click', handleMapContainerClick);
            mapContainer.addEventListener('click', handleMapContainerClick);
            
            // 点击处理函数
            function handleSpotClick(e) {
                e.stopPropagation();
                const locationId = this.dataset.location;
                if (locationId) {
                    // 视觉反馈：点击时缩小
                    this.classList.add('scale-75');
                    setTimeout(() => {
                        this.classList.remove('scale-75');
                        exploreLocation(locationId);
                    }, 200);
                }
            }
            
            // 触摸处理函数
            function handleSpotTouch(e) {
                e.stopPropagation();
                const locationId = this.dataset.location;
                if (locationId) {
                    exploreLocation(locationId);
                }
            }
            
            // 容器点击委托处理
            function handleMapContainerClick(e) {
                const spot = e.target.closest('.treasure-spot');
                if (spot) {
                    const locationId = spot.dataset.location;
                    if (locationId) {
                        exploreLocation(locationId);
                    }
                }
            }
        }

        // 显示指定屏幕
        function showScreen(screenId) {
            // 显示加载中浮层
            const loader = document.createElement('div');
            loader.className = 'fixed inset-0 bg-paper/80 flex items-center justify-center z-50';
            loader.innerHTML = '<i class="fa fa-spinner fa-spin text-3xl text-primary"></i>';
            document.body.appendChild(loader);
            
            // 隐藏所有屏幕
            startScreen.classList.add('hidden');
            mapScreen.classList.add('hidden');
            exploreScreen.classList.add('hidden');
            treasureScreen.classList.add('hidden');
            treasureDetailScreen.classList.add('hidden');
            endScreen.classList.add('hidden');
            
            // 延迟显示目标屏幕
            setTimeout(() => {
                document.getElementById(screenId).classList.remove('hidden');
                loader.remove();
                
                // 如果显示地图，确保点击事件已绑定
                if (screenId === 'map-screen') {
                    setupMapClickHandlers();
                }
            }, 300);
        }

        // 开始游戏
        function startGame() {
            if (!gameData.player.role) {
                // 未选择角色时的反馈
                startButton.classList.add('shake');
                setTimeout(() => startButton.classList.remove('shake'), 500);
                
                // 显示提示
                const tip = document.createElement('div');
                tip.className = 'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-dark/80 text-white px-4 py-2 rounded-lg text-sm z-50 fade-in';
                tip.textContent = '请先选择你的马帮角色！';
                document.body.appendChild(tip);
                setTimeout(() => tip.remove(), 2000);
                return;
            }
            
            // 初始化游戏数据
            gameData.player.score = 0;
            gameData.player.collectedTreasures = [];
            gameData.hintsRemaining = 3;
            
            // 更新分数显示
            updateScoreDisplay();
            
            // 添加日志
            addToAdventureLog(`作为${getRoleName(gameData.player.role)}，你开始了茶马古道的探险之旅。`);
            
            // 显示地图
            showScreen('map-screen');
        }

        // 获取角色名称
        function getRoleName(roleKey) {
            const roles = {
                'guide': '向导',
                'historian': '历史学者',
                'trader': '马帮商人',
                'hunter': '猎人'
            };
            return roles[roleKey] || roleKey;
        }

        // 探索地点
        function exploreLocation(locationId) {
            // 查找地点数据
            const location = gameData.locations.find(loc => loc.id === locationId);
            if (!location) return;
            
            // 保存当前地点
            gameData.currentLocation = location;
            
            // 更新界面
            locationNameElement.textContent = location.name;
            locationDescriptionElement.textContent = location.description;
            locationImageElement.style.backgroundImage = `url('${location.image}')`;
            
            // 生成探索物品
            generateSearchItems(location.items);
            
            // 显示小游戏区域
            miniGameSection.classList.remove('hidden');
            nextLocationSection.classList.add('hidden');
            
            // 更新分数显示
            updateScoreDisplay();
            
            // 添加日志
            addToAdventureLog(`你来到了${location.name}，开始探索这个地方。`);
            
            // 显示探索界面
            showScreen('explore-screen');
        }

        // 生成探索物品
        function generateSearchItems(items) {
            searchAreaElement.innerHTML = '';
            
            // 打乱物品顺序
            const shuffledItems = [...items].sort(() => Math.random() - 0.5);
            
            shuffledItems.forEach(item => {
                const itemElement = document.createElement('div');
                itemElement.className = 'inventory-item bg-secondary bg-opacity-20 rounded-lg p-3 text-center cursor-pointer hover:bg-opacity-40 transition-all relative overflow-hidden group';
                itemElement.dataset.isTreasure = item.isTreasure;
                itemElement.title = item.description;
                
                // 为宝藏添加特殊标记（隐藏）
                const treasureMarker = item.isTreasure ? 
                    '<div class="absolute top-1 right-1 text-yellow-500 opacity-0 group-hover:opacity-100 transition-opacity"><i class="fa fa-diamond"></i></div>' : '';
                
                itemElement.innerHTML = `
                    ${treasureMarker}
                    <i class="fa ${getItemIcon(item.name)} text-xl mb-2 text-primary"></i>
                    <p class="text-sm truncate">${item.name}</p>
                `;
                
                searchAreaElement.appendChild(itemElement);
            });
        }

        // 获取物品图标
        function getItemIcon(itemName) {
            const icons = {
                '马灯': 'fa-lightbulb-o',
                '马鞍': 'fa-shopping-bag',
                '旧账本': 'fa-book',
                '水壶': 'fa fa-beer',
                '铃铛': 'fa-bell',
                '茶叶罐': 'fa-coffee',
                '祈愿牌': 'fa-tag',
                '香炉': 'fa-fire',
                '土地像': 'fa fa-user',
                '经书': 'fa-book',
                '钟': 'fa-music',
                '烛台': 'fa-bolt',
                '马蹄铁': 'fa-wrench',
                '石雕像': 'fa fa-child',
                '铜锁': 'fa-lock',
                '石碑': 'fa-tag',
                '桥墩': 'fa-cubes',
                '铁链': 'fa-link',
                '铁锅': 'fa fa-ship',
                '篝火堆': 'fa fa-fire',
                '陶罐': 'fa-flask',
                '草垫': 'fa fa-square',
                '岩壁刻画': 'fa-paint-brush',
                '弓箭': 'fa-bullseye',
                '炊具': 'ffa fa-ship',
                '旧农具': 'fa fa-pied-piper-alt',
                '马帮旗帜': 'fa-flag',
                '水井': 'fa fa-database',
                '土掌房': 'fa-home',
                '石碾': 'fa-cog'
            };
            
            // 查找匹配的图标，默认使用箱子图标
            return icons[itemName] || 'fa-box';
        }

        // 处理探索物品点击
        function handleSearchItemClick(itemElement, item) {
            // 标记为已检查
            itemElement.classList.add('opacity-50', 'cursor-default');
            itemElement.classList.remove('hover:bg-opacity-40');
            
            // 添加日志
            addToAdventureLog(`你发现了${item.name}：${item.description}`);
            
            // 如果是宝藏
            if (item.isTreasure) {
                // 找到完整的宝藏数据
                const treasure = gameData.currentLocation.items.find(i => i.name === item.name && i.isTreasure);
                
                // 更新宝藏界面
                treasureInfoElement.innerHTML = `
                    <h3 class="font-adventure text-xl text-primary mb-2">${treasure.name}</h3>
                    <p class="text-sm max-w-md mx-auto">${treasure.description}</p>
                `;
                
                // 保存宝藏详情
                treasureDetailNameElement.textContent = treasure.name;
                treasureLocationElement.textContent = gameData.currentLocation.name;
                treasureHistoryElement.textContent = treasure.history;
                
                // 更新宝藏特征列表
                treasureFeaturesElement.innerHTML = '';
                treasure.features.forEach(feature => {
                    const li = document.createElement('li');
                    li.textContent = feature;
                    treasureFeaturesElement.appendChild(li);
                });
                
                // 使用当前地点图片作为宝藏详情图片
                treasureDetailImageElement.style.backgroundImage = locationImageElement.style.backgroundImage;
                
                // 增加分数
                gameData.player.score += 50;
                updateScoreDisplay();
                
                // 添加到已收集宝藏
                gameData.player.collectedTreasures.push({
                    name: treasure.name,
                    location: gameData.currentLocation.name,
                    image: gameData.currentLocation.image
                });
                
                // 添加日志
                addToAdventureLog(`恭喜！你找到了${treasure.name}，获得了50分！`);
                
                // 显示宝藏界面
                showScreen('treasure-screen');
                
                // 隐藏小游戏区域，显示下一个地点按钮
                miniGameSection.classList.add('hidden');
                nextLocationSection.classList.remove('hidden');
            } else {
                // 非宝藏物品，减少分数
                gameData.player.score = Math.max(0, gameData.player.score - 5);
                updateScoreDisplay();
            }
        }

        // 使用提示
        function useHint() {
            if (gameData.hintsRemaining <= 0) return;
            
            // 减少提示次数
            gameData.hintsRemaining--;
            updateHintsDisplay();
            
            // 减少分数
            gameData.player.score = Math.max(0, gameData.player.score - 10);
            updateScoreDisplay();
            
            // 找到当前地点的宝藏
            const treasure = gameData.currentLocation.items.find(item => item.isTreasure);
            if (!treasure) return;
            
            // 显示提示
            const hint = document.createElement('div');
            hint.className = 'fixed top-1/4 left-1/2 -translate-x-1/2 bg-accent/90 text-white px-4 py-2 rounded-lg text-sm z-40 fade-in';
            hint.textContent = `提示：寻找${treasure.name}，它${treasure.description.substring(0, 15)}...`;
            document.body.appendChild(hint);
            
            // 高亮宝藏物品（闪烁效果）
            const treasureElements = document.querySelectorAll('.inventory-item');
            treasureElements.forEach(el => {
                if (el.querySelector('p').textContent === treasure.name) {
                    el.classList.add('animate-pulse', 'border-2', 'border-yellow-500');
                    setTimeout(() => {
                        el.classList.remove('animate-pulse', 'border-2', 'border-yellow-500');
                    }, 3000);
                }
            });
            
            setTimeout(() => hint.remove(), 3000);
            
            // 添加日志
            addToAdventureLog('你使用了一次提示，花费了10分。');
        }

        // 更新提示显示
        function updateHintsDisplay() {
            hintsCountDisplay.textContent = `(${gameData.hintsRemaining}/3)`;
            
            if (gameData.hintsRemaining <= 0) {
                hintButton.disabled = true;
                hintButton.classList.add('opacity-50', 'cursor-not-allowed', 'bg-gray-400', 'hover:bg-gray-400');
                hintButton.innerHTML = '<i class="fa fa-question-circle mr-1"></i> 提示已用尽';
            } else {
                hintButton.disabled = false;
                hintButton.classList.remove('opacity-50', 'cursor-not-allowed', 'bg-gray-400', 'hover:bg-gray-400');
                hintButton.innerHTML = '<i class="fa fa-question-circle mr-1"></i> 获取提示 <span id="hints-count" class="ml-1 text-xs opacity-70">(' + gameData.hintsRemaining + '/3)</span>';
            }
        }

        // 开始小游戏
        function startMiniGame() {
            if (!gameData.currentLocation) return;
            
            const gameType = gameData.currentLocation.miniGame.type;
            
            switch (gameType) {
                case 'memory':
                    startMemoryGame();
                    break;
                case 'puzzle':
                    startPuzzleGame();
                    break;
                case 'balance':
                    startBalanceGame();
                    break;
                case 'search':
                    startSearchGame();
                    break;
                case 'trading':
                    startTradingGame();
                    break;
                default:
                    startMemoryGame(); // 默认游戏
            }
        }

        // 记忆游戏
        function startMemoryGame() {
            miniGameContent.innerHTML = `
                <div class="memory-game grid grid-cols-4 gap-2 mb-3">
                    <div class="memory-card bg-primary text-white h-12 rounded flex items-center justify-center cursor-pointer" data-card="1">?</div>
                    <div class="memory-card bg-primary text-white h-12 rounded flex items-center justify-center cursor-pointer" data-card="2">?</div>
                    <div class="memory-card bg-primary text-white h-12 rounded flex items-center justify-center cursor-pointer" data-card="3">?</div>
                    <div class="memory-card bg-primary text-white h-12 rounded flex items-center justify-center cursor-pointer" data-card="4">?</div>
                    <div class="memory-card bg-primary text-white h-12 rounded flex items-center justify-center cursor-pointer" data-card="4">?</div>
                    <div class="memory-card bg-primary text-white h-12 rounded flex items-center justify-center cursor-pointer" data-card="3">?</div>
                    <div class="memory-card bg-primary text-white h-12 rounded flex items-center justify-center cursor-pointer" data-card="1">?</div>
                    <div class="memory-card bg-primary text-white h-12 rounded flex items-center justify-center cursor-pointer" data-card="2">?</div>
                </div>
                <p class="font-story text-xs">记住物品的位置，找出所有配对</p>
            `;
            
            startMiniGameButton.classList.add('hidden');
            
            // 事件委托绑定卡片点击
            let flippedCards = [];
            let matchedPairs = 0;
            miniGameContent.addEventListener('click', cardClickHandler);
            
            function cardClickHandler(e) {
                const card = e.target.closest('.memory-card');
                if (!card || card.classList.contains('flipped') || flippedCards.length >= 2) return;
                
                // 翻牌逻辑
                card.textContent = card.dataset.card;
                card.classList.add('flipped', 'bg-accent');
                flippedCards.push(card);
                
                // 配对判断
                if (flippedCards.length === 2) {
                    if (flippedCards[0].dataset.card === flippedCards[1].dataset.card) {
                        flippedCards.forEach(c => c.classList.add('matched', 'bg-green-500'));
                        matchedPairs++;
                        flippedCards = [];
                        
                        // 游戏胜利
                        if (matchedPairs === 3) {
                            miniGameContent.removeEventListener('click', cardClickHandler);
                            setTimeout(() => {
                                miniGameContent.innerHTML = `
                                    <p class="font-story text-sm text-green-600 mb-2">恭喜！你赢得了额外线索！</p>
                                    <p class="font-story text-xs">${gameData.currentLocation.miniGame.reward}</p>
                                `;
                                gameData.player.score += 20;
                                updateScoreDisplay();
                                addToAdventureLog('你完成了记忆小游戏，获得了20分和一条线索！');
                            }, 500);
                        }
                    } else {
                        // 配对失败，翻回卡片
                        setTimeout(() => {
                            flippedCards.forEach(c => {
                                c.textContent = '?';
                                c.classList.remove('flipped', 'bg-accent');
                            });
                            flippedCards = [];
                        }, 1000);
                    }
                }
            }
        }

        // 拼图游戏
        function startPuzzleGame() {
            miniGameContent.innerHTML = `
                <p class="font-story text-sm mb-3">将马帮神像的碎片拼回原位（点击碎片交换位置）</p>
                <div class="puzzle-game grid grid-cols-3 gap-1 mb-3">
                    <div class="puzzle-piece bg-primary h-16 rounded flex items-center justify-center cursor-pointer" data-piece="1">1</div>
                    <div class="puzzle-piece bg-primary h-16 rounded flex items-center justify-center cursor-pointer" data-piece="2">2</div>
                    <div class="puzzle-piece bg-primary h-16 rounded flex items-center justify-center cursor-pointer" data-piece="3">3</div>
                    <div class="puzzle-piece bg-primary h-16 rounded flex items-center justify-center cursor-pointer" data-piece="4">4</div>
                    <div class="puzzle-piece bg-primary h-16 rounded flex items-center justify-center cursor-pointer" data-piece="5">5</div>
                    <div class="puzzle-piece bg-primary h-16 rounded flex items-center justify-center cursor-pointer" data-piece="6">6</div>
                    <div class="puzzle-piece bg-primary h-16 rounded flex items-center justify-center cursor-pointer" data-piece="7">7</div>
                    <div class="puzzle-piece bg-primary h-16 rounded flex items-center justify-center cursor-pointer" data-piece="8">8</div>
                    <div class="puzzle-piece bg-primary h-16 rounded flex items-center justify-center cursor-pointer" data-piece="9">9</div>
                </div>
            `;
            
            startMiniGameButton.classList.add('hidden');
            
            // 打乱拼图
            const pieces = Array.from(document.querySelectorAll('.puzzle-piece'));
            const values = pieces.map(p => p.dataset.piece);
            values.sort(() => Math.random() - 0.5);
            pieces.forEach((p, i) => p.dataset.piece = values[i]);
            pieces.forEach(p => p.textContent = p.dataset.piece);
            
            // 拼图逻辑
            let firstPiece = null;
            miniGameContent.addEventListener('click', pieceClickHandler);
            
            function pieceClickHandler(e) {
                const piece = e.target.closest('.puzzle-piece');
                if (!piece) return;
                
                if (!firstPiece) {
                    firstPiece = piece;
                    piece.classList.add('bg-accent');
                } else if (firstPiece !== piece) {
                    // 交换两个拼图
                    const temp = firstPiece.dataset.piece;
                    firstPiece.dataset.piece = piece.dataset.piece;
                    piece.dataset.piece = temp;
                    firstPiece.textContent = firstPiece.dataset.piece;
                    piece.textContent = piece.dataset.piece;
                    
                    firstPiece.classList.remove('bg-accent');
                    firstPiece = null;
                    
                    // 检查是否完成
                    checkPuzzleCompletion();
                }
            }
            
            function checkPuzzleCompletion() {
                const pieces = document.querySelectorAll('.puzzle-piece');
                let completed = true;
                
                pieces.forEach((piece, index) => {
                    if (piece.dataset.piece !== (index + 1).toString()) {
                        completed = false;
                    }
                });
                
                if (completed) {
                    miniGameContent.removeEventListener('click', pieceClickHandler);
                    setTimeout(() => {
                        miniGameContent.innerHTML = `
                            <p class="font-story text-sm text-green-600 mb-2">恭喜！你完成了拼图游戏！</p>
                            <p class="font-story text-xs">${gameData.currentLocation.miniGame.reward}</p>
                        `;
                        gameData.player.score += 20;
                        updateScoreDisplay();
                        addToAdventureLog('你完成了拼图小游戏，获得了20分和一条线索！');
                    }, 500);
                }
            }
        }

        // 平衡游戏
        function startBalanceGame() {
            miniGameContent.innerHTML = `
                <p class="font-story text-sm mb-3">帮助马帮将货物平稳地运过桥（使用左右箭头键移动平衡木）</p>
                <div class="balance-game flex justify-center items-center h-24 mb-3">
                    <div id="balance-bar" class="w-48 h-4 bg-primary rounded-full relative transform origin-center transition-transform duration-100">
                        <div id="balance-cargo" class="absolute w-8 h-8 bg-accent rounded-full top-1/2 left-1/4 -translate-y-1/2"></div>
                    </div>
                </div>
                <div class="flex justify-center gap-3">
                    <button id="balance-left" class="bg-secondary hover:bg-secondary/80 text-ink py-1 px-3 rounded text-sm">
                        <i class="fa fa-arrow-left"></i>
                    </button>
                    <button id="balance-right" class="bg-secondary hover:bg-secondary/80 text-ink py-1 px-3 rounded text-sm">
                        <i class="fa fa-arrow-right"></i>
                    </button>
                </div>
            `;
            
            startMiniGameButton.classList.add('hidden');
            
            const balanceBar = document.getElementById('balance-bar');
            const balanceCargo = document.getElementById('balance-cargo');
            const leftButton = document.getElementById('balance-left');
            const rightButton = document.getElementById('balance-right');
            
            let rotation = 0;
            let cargoPosition = 25; // 百分比
            let gameInterval;
            
            // 货物移动
            function moveCargo() {
                cargoPosition = (cargoPosition + 0.5) % 100;
                balanceCargo.style.left = `${cargoPosition}%`;
                
                // 根据货物位置计算平衡
                const weight = 1 - (cargoPosition / 100);
                rotation = (weight - 0.5) * 20;
                balanceBar.style.transform = `rotate(${rotation}deg)`;
                
                // 检查是否平衡
                if (Math.abs(rotation) < 3) {
                    clearInterval(gameInterval);
                    miniGameContent.innerHTML = `
                        <p class="font-story text-sm text-green-600 mb-2">恭喜！你成功平衡了货物！</p>
                        <p class="font-story text-xs">${gameData.currentLocation.miniGame.reward}</p>
                    `;
                    gameData.player.score += 20;
                    updateScoreDisplay();
                    addToAdventureLog('你完成了平衡小游戏，获得了20分和一条线索！');
                }
            }
            
            // 控制平衡
            leftButton.addEventListener('click', () => {
                rotation = Math.max(rotation - 5, -30);
                balanceBar.style.transform = `rotate(${rotation}deg)`;
            });
            
            rightButton.addEventListener('click', () => {
                rotation = Math.min(rotation + 5, 30);
                balanceBar.style.transform = `rotate(${rotation}deg)`;
            });
            
            // 键盘控制
            document.addEventListener('keydown', (e) => {
                if (e.key === 'ArrowLeft') {
                    rotation = Math.max(rotation - 5, -30);
                    balanceBar.style.transform = `rotate(${rotation}deg)`;
                } else if (e.key === 'ArrowRight') {
                    rotation = Math.min(rotation + 5, 30);
                    balanceBar.style.transform = `rotate(${rotation}deg)`;
                }
            });
            
            // 开始游戏
            gameInterval = setInterval(moveCargo, 100);
        }

        // 搜索游戏
        function startSearchGame() {
            miniGameContent.innerHTML = `
                <p class="font-story text-sm mb-3">在昏暗的山洞中找出所有隐藏的马帮物品（点击找出物品）</p>
                <div class="search-game bg-gray-800 h-32 rounded-lg relative overflow-hidden mb-3">
                    <div class="torch-light absolute w-24 h-24 bg-yellow-200 rounded-full opacity-50 blur-xl" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
                    <div class="search-item absolute w-6 h-6 bg-brown-500 rounded opacity-0 cursor-pointer" style="top: 30%; left: 20%;" data-item="1"></div>
                    <div class="search-item absolute w-8 h-6 bg-brown-600 rounded opacity-0 cursor-pointer" style="top: 60%; left: 70%;" data-item="2"></div>
                    <div class="search-item absolute w-5 h-5 bg-brown-400 rounded-full opacity-0 cursor-pointer" style="top: 40%; left: 50%;" data-item="3"></div>
                    <div class="search-item absolute w-7 h-4 bg-brown-700 rounded opacity-0 cursor-pointer" style="top: 70%; left: 30%;" data-item="4"></div>
                </div>
                <p class="font-story text-xs text-gray-600">找到 <span id="found-items">0</span>/4 件物品</p>
            `;
            
            startMiniGameButton.classList.add('hidden');
            
            const gameArea = document.querySelector('.search-game');
            const torchLight = document.querySelector('.torch-light');
            const items = document.querySelectorAll('.search-item');
            const foundItemsDisplay = document.getElementById('found-items');
            
            let foundItems = 0;
            
            // 显示物品轮廓
            setTimeout(() => {
                items.forEach(item => {
                    item.classList.add('opacity-20');
                    item.classList.add('border', 'border-white', 'border-opacity-30');
                });
            }, 1000);
            
            // 隐藏物品轮廓
            setTimeout(() => {
                items.forEach(item => {
                    item.classList.remove('opacity-20', 'border', 'border-white', 'border-opacity-30');
                    item.classList.add('opacity-0');
                });
            }, 3000);
            
            // 鼠标移动控制手电筒
            gameArea.addEventListener('mousemove', (e) => {
                const rect = gameArea.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                torchLight.style.left = `${x}px`;
                torchLight.style.top = `${y}px`;
                
                // 照亮物品
                items.forEach(item => {
                    const itemRect = item.getBoundingClientRect();
                    const itemX = itemRect.left + itemRect.width / 2 - rect.left;
                    const itemY = itemRect.top + itemRect.height / 2 - rect.top;
                    
                    const distance = Math.sqrt(Math.pow(x - itemX, 2) + Math.pow(y - itemY, 2));
                    
                    if (distance < 40) {
                        item.classList.add('opacity-80');
                    } else {
                        item.classList.remove('opacity-80');
                    }
                });
            });
            
            // 点击找到物品
            gameArea.addEventListener('click', (e) => {
                const item = e.target.closest('.search-item');
                if (item && !item.classList.contains('found')) {
                    item.classList.add('found', 'bg-accent', 'opacity-100');
                    foundItems++;
                    foundItemsDisplay.textContent = foundItems;
                    
                    if (foundItems === 4) {
                        setTimeout(() => {
                            miniGameContent.innerHTML = `
                                <p class="font-story text-sm text-green-600 mb-2">恭喜！你找到了所有隐藏物品！</p>
                                <p class="font-story text-xs">${gameData.currentLocation.miniGame.reward}</p>
                            `;
                            gameData.player.score += 20;
                            updateScoreDisplay();
                            addToAdventureLog('你完成了搜索小游戏，获得了20分和一条线索！');
                        }, 500);
                    }
                }
            });
        }

        // 贸易游戏
        function startTradingGame() {
            miniGameContent.innerHTML = `
                <p class="font-story text-sm mb-3">与当地村民进行贸易，用合适的价格交换商品</p>
                <div class="trading-game mb-3">
                    <div class="bg-secondary bg-opacity-20 p-2 rounded mb-2">
                        <p class="text-xs"><span class="font-bold">村民想出售：</span> <span id="trading-item">马帮铜铃</span></p>
                        <p class="text-xs"><span class="font-bold">村民要价：</span> <span id="asking-price">80</span> 文钱</p>
                    </div>
                    <div class="flex items-center gap-2 mb-2">
                        <button id="price-down" class="bg-secondary hover:bg-secondary/80 text-ink py-1 px-3 rounded text-sm">
                            <i class="fa fa-minus"></i>
                        </button>
                        <input type="number" id="offer-price" value="40" min="1" max="100" class="w-20 border border-secondary rounded px-2 py-1 text-sm">
                        <button id="price-up" class="bg-secondary hover:bg-secondary/80 text-ink py-1 px-3 rounded text-sm">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                    <button id="make-offer" class="btn-interactive w-full bg-primary hover:bg-primary/90 text-white py-2 rounded text-sm">
                        提出报价
                    </button>
                </div>
                <p id="trade-message" class="font-story text-xs text-gray-600">请给出合理的价格，太高会损失利润，太低村民不会同意</p>
            `;
            
            startMiniGameButton.classList.add('hidden');
            
            const priceDownButton = document.getElementById('price-down');
            const priceUpButton = document.getElementById('price-up');
            const offerPriceInput = document.getElementById('offer-price');
            const makeOfferButton = document.getElementById('make-offer');
            const tradeMessage = document.getElementById('trade-message');
            const askingPrice = 80; // 村民要价
            const realValue = 60; // 实际价值
            
            // 调整价格
            priceDownButton.addEventListener('click', () => {
                offerPriceInput.value = Math.max(1, parseInt(offerPriceInput.value) - 5);
            });
            
            priceUpButton.addEventListener('click', () => {
                offerPriceInput.value = Math.min(100, parseInt(offerPriceInput.value) + 5);
            });
            
            // 提交报价
            makeOfferButton.addEventListener('click', () => {
                const offer = parseInt(offerPriceInput.value);
                
                if (offer >= askingPrice) {
                    tradeMessage.textContent = '价格太高了！村民很乐意卖给你，但你损失了利润。';
                    tradeMessage.className = 'font-story text-xs text-orange-600';
                    endTradingGame(10); // 较少的分数
                } else if (offer < realValue - 10) {
                    tradeMessage.textContent = '价格太低了！村民不愿意卖给你。';
                    tradeMessage.className = 'font-story text-xs text-red-600';
                } else if (offer <= realValue && offer >= realValue - 10) {
                    tradeMessage.textContent = '太棒了！你用合理的价格买到了商品！';
                    tradeMessage.className = 'font-story text-xs text-green-600';
                    endTradingGame(30); // 较多的分数
                } else {
                    tradeMessage.textContent = '还不错，价格还算合理。';
                    tradeMessage.className = 'font-story text-xs text-blue-600';
                    endTradingGame(20); // 中等分数
                }
            });
            
            function endTradingGame(points) {
                makeOfferButton.disabled = true;
                priceDownButton.disabled = true;
                priceUpButton.disabled = true;
                
                setTimeout(() => {
                    miniGameContent.innerHTML = `
                        <p class="font-story text-sm text-green-600 mb-2">恭喜！你完成了贸易小游戏，获得了${points}分！</p>
                        <p class="font-story text-xs">${gameData.currentLocation.miniGame.reward}</p>
                    `;
                    gameData.player.score += points;
                    updateScoreDisplay();
                    addToAdventureLog(`你完成了贸易小游戏，获得了${points}分和一条线索！`);
                }, 1500);
            }
        }

        // 显示宝藏详情
        function showTreasureDetail() {
            showScreen('treasure-detail-screen');
        }

        // 继续探险
        function continueAdventure() {
            // 检查是否收集了所有宝藏
            if (gameData.player.collectedTreasures.length >= gameData.locations.length) {
                // 游戏结束
                endGame();
            } else {
                // 返回地图
                showScreen('map-screen');
            }
        }

        // 前往下一个地点
        function goToNextLocation() {
            // 找到下一个未探索的地点
            const exploredLocations = gameData.player.collectedTreasures.map(t => 
                gameData.locations.find(l => l.name === t.location).id
            );
            
            const nextLocation = gameData.locations.find(loc => !exploredLocations.includes(loc.id));
            
            if (nextLocation) {
                exploreLocation(nextLocation.id);
            } else {
                // 所有地点都已探索，游戏结束
                endGame();
            }
        }

        // 游戏结束
        function endGame() {
            // 更新最终分数
            finalScoreDisplay.innerHTML = `<i class="fa fa-star text-yellow-500 mr-2"></i> ${gameData.player.score}`;
            
            // 显示收集的宝藏
            collectedTreasuresElement.innerHTML = '';
            
            gameData.player.collectedTreasures.forEach(treasure => {
                const treasureElement = document.createElement('div');
                treasureElement.className = 'bg-secondary bg-opacity-20 rounded-lg p-2 text-center';
                treasureElement.innerHTML = `
                    <div class="h-16 bg-cover bg-center rounded mb-1" style="background-image: url('${treasure.image}')"></div>
                    <p class="font-adventure text-xs">${treasure.name}</p>
                    <p class="text-xs opacity-70">${treasure.location}</p>
                `;
                collectedTreasuresElement.appendChild(treasureElement);
            });
            
            // 显示结束界面
            showScreen('end-screen');
        }

        // 重新开始游戏
        function restartGame() {
            startGame();
        }

        // 分享结果
        function shareResults() {
            // 模拟分享功能
            const shareText = `我在马帮文化藏宝图冒险记中获得了${gameData.player.score}分，收集了${gameData.player.collectedTreasures.length}件宝藏！快来挑战吧！`;
            
            // 复制到剪贴板
            navigator.clipboard.writeText(shareText).then(() => {
                alert('分享文本已复制到剪贴板！');
            }).catch(err => {
                console.error('无法复制文本: ', err);
                alert(shareText);
            });
        }

        // 更新分数显示
        function updateScoreDisplay() {
            scoreDisplay.textContent = `得分: ${gameData.player.score}`;
            mapScoreDisplay.textContent = `得分: ${gameData.player.score}`;
            exploreScoreDisplay.textContent = `得分: ${gameData.player.score}`;
        }

        // 添加到探险日志
        function addToAdventureLog(text) {
            const logEntry = document.createElement('p');
            logEntry.className = 'mb-1 fade-in';
            logEntry.innerHTML = `<span class="opacity-70">[${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}]</span> ${text}`;
            adventureLog.appendChild(logEntry);
            adventureLog.scrollTop = adventureLog.scrollHeight;
        }

        // 初始化游戏
        window.addEventListener('DOMContentLoaded', initGame);
    </script>
</body>
</html>
